<!DOCTYPE HTML>
<html lang="zh" dir="ltr">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>转盘</title>
    <link href="../css/turnplate.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://tpn.gzl.com.cn/static/css/weui.min.css" />

</head>
<body>
<div class="turnplateBox">
    <img class="turntable_tit" src="../images/turntable_tit.png" alt="">
    <!-- 抽奖 -->
    <div class="lottery_box">
        <!-- 转盘 -->
        <div class="turntable-bg">
            <img src="../images/turn_wheel.png" alt="转盘" class="rotate" id="rotate">
            <img class="pointer" src="../images/pointer.png" alt="">
            <img class="topArrow" src="../images/arrow_point.png" alt="开始抽奖">
        </div>
        <img class="start_award" src="../images/start_award.png" alt="">
    </div>
    <!-- 中奖填写信息 -->
    <div class="lottery_success">
        <p class="lottery_info_box">
            <span>恭喜你获得</span>
            <span class="lottery_info">长隆大马戏门票</span>
        </p>
        <div class="input_box">
            <label for="">真实姓名 <input type="text" maxlength="" class="username"></label>   
            <label for="">联系电话 <input type="text" class="usercontact"></label>
        </div>
        <div class="warm_tips">
            <h4>温馨提示</h4>
            <span class="situation_one">请务必填写好信息，我们将会在活动结束后5个工作日内联系您领奖。</span>
            <span class="situation_two">
                请您在12月27日前到广之旅总部领取奖品。<br>
                领取时间：周一到周五(上午9:00-11:30；下午2:00-5:30)，有问题可联系86348700。<br>
                领取地址：广州市白云区机场西乐嘉路1号 <br>
                广之旅总部4楼新媒体组<br>
            </span>
        </div>
        <div class="btn_box">
            <img class="submit_btn" src="../images/submit_btn.png" alt="">
            <img class="share_lottery_btn" src="../images/share_lottery_btn.png" alt="">
        </div>
    </div>
    <div class="info_tips">
        <span class="tip_txt">请先填写信息！</span>
    </div>
    <div class="share_tip popup_box">
        <span class="popup_bg"></span>
        <img class="shareTip" src="../images/shareTip.png" alt="">
    </div>
    <div class="fail_share_tip popup_box">
        <span class="popup_bg"></span>
        <img class="shareTip" src="../images/lottery_fail_sharetip.png" alt="">
    </div>
</div>
<script src="http://zt.gzl.com.cn/subject/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://tpn.gzl.com.cn/static/js/weui.min.js"></script>
<script src="../js/untils.js"></script>
<script src="../js/vconsole.min.js"></script>
<script src="../js/awardRotate.js"></script>
<script>
    $(document).ready(function () {
        var viewHeight = window.innerHeight; //获取可视区域高度
        var phoneNum = $('.usercontact').val(),
            flag = false,
            nameval,
            submitfalg = true;
        var shareTxt = "冬至和老孙的“火眼金睛”有关系？免费旅游名额等你拿！";
        var shareLink = "http://tpn.gzl.com.cn/static/game/WinterSolstice/html/playgame.html";
        var ticketObj = untils.getQueryString("ticketObj");
        var checkToken = untils.getQueryString("checkToken");
        console.log('checkToken:', decodeURIComponent(checkToken));
        console.log('ticketObj:', ticketObj);
        $("input").focus(function () {
            $(".turnplateBox").css("height", viewHeight);
        }).blur(function () {
            $(".turnplateBox").css("height", "100%");
        });

        $('.input_box .usercontact').blur(function () {
            var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
            phoneNum = $('.usercontact').val();
            flag = reg.test(phoneNum);
            console.log(nameval,!nameval,(!nameval || !flag));
            if (!flag) {
                $('.info_tips').show('fast', function () {
                    _this = $(this);
                    var time = setTimeout(function () {
                        _this.hide('fast');
                    }, 2000)
                })
            }
        })

        $('.input_box .username').blur(function () {
            nameval = $('.username').val();
            if (!nameval) {
                $('.info_tips').show('fast', function () {
                    _this = $(this);
                    var time = setTimeout(function () {
                        _this.hide('fast');
                    }, 2000)
                })
            }
        })

        //提交资料
        $('.submit_btn').click(function(){
            var isPhoneCorrect = ((phoneNum.length == 11 ? true : false) && flag) && nameval;
            var userinfo = {
                username: $('.username').val(),
                userphone: $('.usercontact').val(),
                score: 20
            }
            console.log(isPhoneCorrect);
            if (isPhoneCorrect) {
                if (!submitfalg) {
                    $('.tip_txt').text('请勿再次提交！');
                    $('.info_tips').show('fast', function () {
                        _this = $(this);
                        var time = setTimeout(function () {
                            _this.hide('fast');
                        }, 2000)
                    })
                }else{
                    untils.submitresult('40298198600716a5016048c9215e36d3', 'weixin', ticketObj, checkToken, userinfo,function(data){
                        console.log('submitresult-data', data);
                        if(data.success){
                            submitfalg = false;
                            $('.tip_txt').text('提交成功！快分享你的喜悦吧！');
                            $('.info_tips').show('fast', function () {
                                _this = $(this);
                                var time = setTimeout(function () {
                                    _this.hide('fast');
                                }, 5000)
                            })
                        }
                    })
                }
            }else{
                $('.info_tips').show('fast', function () {
                    _this = $(this);
                    var time = setTimeout(function () {
                        _this.hide('fast');
                    }, 2000)
                })
            }
        })

        //分享
        $('.share_lottery_btn').click(function(){
            $('.share_tip').show();
        })

        var bRotate = false;
        //var vConsole = new VConsole();
        var rotateTimeOut = function () {
            $('#rotate').rotate({
                angle: 0,
                animateTo: 2160,
                duration: 8000,
                callback: function () {
                    alert('网络超时，请检查您的网络设置！');
                }
            });
        };

        var rotateFn = function (awards, angles, txt) {
            bRotate = !bRotate;
            $('#rotate').stopRotate();
            $('#rotate').rotate({
                angle: 0,
                animateTo: angles + 1800,
                duration: 8000,
                callback: function () {
                    $('.lottery_info').text(txt);
                    if (txt == '旅行衣物收纳袋') {
                        $('.situation_two').show().siblings('.situation_one').hide();
                        $('.lottery_box').hide('fast').siblings('.lottery_success').show();
                    }else if (txt == "谢谢参与") {
                        $('.fail_share_tip').show();
                    }else{
                        $('.situation_one').show().siblings('.situation_two').hide()
                        $('.lottery_box').hide('fast').siblings('.lottery_success').show();
                    }
                    bRotate = !bRotate;
                }
            })
        };

        //开始抽奖
        $('.start_award').click(function () {
            if (bRotate)return;
            untils.getluckyticket("40298198600716a5016048c9215e36d3", "weixin", decodeURIComponent(checkToken), function(data){
                console.log(data);
                switch (data.name) {
                    case "清远熹乐谷温泉度假酒店":  //清远熹乐谷温泉度假酒店
                        //var angle = [88, 137, 185, 235, 287];
                        rotateFn(0, 0, data.name);
                        break;
                    case "谢谢参与":
                        //var angle = [137, 185, 235, 287];
                        rotateFn(1, 60, data.name);
                        break;
                    case "旅行衣物收纳袋":
                        //var angle = [137, 185, 235, 287];
                        rotateFn(2, 120, data.name);
                        break;
                    case "谢谢参与":
                        //var angle = [185, 235, 287];
                        rotateFn(3, 180, data.name);
                        break;
                    case "长隆大马戏门票":  //上海迪士尼
                        //var angle = [26, 88, 137, 185, 235, 287, 337];
                        rotateFn(4, 240, data.name);
                        break;
                    case "谢谢参与":
                        //var angle = [185, 235, 287];
                        rotateFn(5, 300, data.name);
                        break;
                }
            })
        });

        //登录框关闭
        $('.login-close').click(function(){
            $(".login-box").hide();
        });


        $('.popup .closeButton').click(function () {
            $('.popup').fadeOut();
        });

        //分享
        untils.weChatConfig(shareLink, shareTxt, function () {
            untils.sharegame(activityID, 'weixin', function (sharedata) {
                // console.log("分享成功--before", sharedata);
                if (sharedata.desc == "游戏分享成功") {
                    window.location.href = "http://tpn.gzl.com.cn/static/game/WinterSolstice/html/playgame.html";
                } else {
                    alert("分享出错");
                }
            })
        })

    })
</script>
</body>
</html>